export default function Responsive() {
  return (
    <>
      <div className="grid grid-cols-3 gap-4 ml-12 mr-12">
        <div>响应式背景固定</div>
        <div className="w-40 h-40 bg-no-repeat bg-local lg:bg-fixed" style={{ "backgroundImage": "url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201612%2F18%2F20161218173928_d2KZY.thumb.400_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642325190&t=2a8c09b70047c9e840e0d95585dbafdf)", "backgroundSize": "1000px 1000px" }}></div>
        <div className="w-40 h-40 bg-no-repeat bg-local lg:bg-scoll" style={{ "backgroundImage": "url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201612%2F18%2F20161218173928_d2KZY.thumb.400_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642325190&t=2a8c09b70047c9e840e0d95585dbafdf)", "backgroundSize": "1000px 1000px" }}></div>
        <div>响应式颜色变化</div>
        <div className="w-40 h-40 bg-red-100 lg:bg-blue-100"></div>
        <div className="w-40 h-40 bg-red-400 lg:bg-blue-400"></div>
        <div>响应式边框样式变化</div>
        <div className="w-40 h-40 bg-green-200 bg-clip-border p-6 border-4 border-indigo-300 border-dashed lg:bg-clip-content lg:border-black"></div>
        <div className="w-40 h-40 bg-green-200 bg-clip-padding p-6 border-4 border-indigo-300 border-dashed lg:bg-clip-text lg:border-black"></div>
        <div>响应式颜色透明度变化</div>
        <div className="w-40 h-40 bg-purple-900 bg-opacity-90 lg:bg-opacity-10"></div>
        <div className="w-40 h-40 bg-blue-900 bg-opacity-10 lg:bg-opacity-90"></div>
        <div>响应式渐变方向和渐变颜色</div>
        <div className="w-40 h-40 bg-gradient-to-tr from-red-300 via-blue-400 to-green-600 lg:bg-gradient-to-tl"></div>
        <div className="w-40 h-40 bg-gradient-to-tl from-red-600 via-blue-400 to-green-300 lg:bg-gradient-to-tr"></div>
        <div>响应式背景图片位置改变</div>
        <div className="w-40 h-40 bg-left-top bg-no-repeat lg:bg-left-bottom" style={{ "backgroundImage": "url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201612%2F18%2F20161218173928_d2KZY.thumb.400_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642325190&t=2a8c09b70047c9e840e0d95585dbafdf)", "backgroundSize": "100px 100px" }}></div>
        <div className="w-40 h-40 bg-right-bottom bg-no-repeat lg:bg-right-top" style={{ "backgroundImage": "url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201612%2F18%2F20161218173928_d2KZY.thumb.400_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642325190&t=2a8c09b70047c9e840e0d95585dbafdf)", "backgroundSize": "100px 100px" }}></div>
        <div>响应式背景图片重复及大小</div>
        <div className="w-40 h-40 bg-contain lg:bg-auto bg-no-repeat" style={{ "backgroundImage": "url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201612%2F18%2F20161218173928_d2KZY.thumb.400_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642325190&t=2a8c09b70047c9e840e0d95585dbafdf)", "backgroundSize": "100px 100px" }}></div>
        <div className="w-40 h-40 bg-repeat-x lg:bg-repeat-y" style={{ "backgroundImage": "url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201612%2F18%2F20161218173928_d2KZY.thumb.400_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642325190&t=2a8c09b70047c9e840e0d95585dbafdf)", "backgroundSize": "50px 50px" }}></div>
      </div>
    </>
  )
}